<template>
  <div class="detail-container">
    <!-- 加载中 -->
    <loading :isLoading="loading" />


    <div class="top">
      <!-- 返回按钮 -->
      <div class="back" @click="$router.go(-1)">
        < </div>
          <div class="title">{{ data.attractionName }}</div>
          <span></span>
      </div>
      <div class="detail">
        <div class="demo">
          <!-- 图片 -->
          <span></span>
          <span></span>
          <span></span>

          <el-carousel style="width: 300px;height: 100%;">
            <el-carousel-item style="height: 90%;" v-for="item, index in data.imgList" :key="index">
              <img :src="item ? base_url + item.attractionPhoto : ''" alt="">
            </el-carousel-item>
          </el-carousel>
          <span></span>

          <div class="text">
            <!-- 标题 -->

            <!-- 地址 -->
            <div class="address">{{ data.address }}</div>
            <!-- 开放时间 -->
            <div class="openTime">开放时间:{{ data.openTime }}</div>
            <!-- 评分 -->
            <div class="rat">评分：{{ data.rating }}</div>
            <!-- 浏览量 -->
            <div class="views">浏览量:{{ data.views }}</div>
            <!-- 票价 -->
            <div class="price">{{ data.views }}</div>
          </div>
        </div>
        <div class="itemList">
          <!-- 收藏按钮 -->
          <div class="collect">
            <el-button type="success" plain @click="Collect()">{{ orCollect ? '取消收藏' : '收藏' }}</el-button>
          </div>
          <!-- 评论按钮 -->
          <div class="comments">
            <el-button type="info" plain @click="Comments()">评论</el-button>
          </div>
        </div>
        <div class="description">
          <h3>简介：</h3>
          <!-- 简介 -->
          <p>{{ data.description }}</p>
        </div>
        <!-- 生成旅游计划按钮 -->
        <!-- <div class="plan" @click=" aiPlan()">生成旅游计划</div> -->
      </div>
    </div>
</template>

<script>
import { Collect, ifCollect } from '../../api/system/user';
import Cookies from "js-cookie";

import loading from '../../layout/components/loading.vue';

export default {
  components: {
    loading
  },
  data() {
    return {
      loading: false,

      data: null,
      base_url: process.env.VUE_APP_BASE_API,
      orCollect: ''
    }
  },
  created() {
    // 如果本地存储中没有数据，则从路由中获取数据并存储到本地
    if (!localStorage.getItem('data')) {
      this.data = this.$route.query.data;
      localStorage.setItem('data', JSON.stringify(this.data));

    } else {
      // 否则从本地存储中获取数据
      this.data = JSON.parse(localStorage.getItem('data'));
    }
    this.ifCollect()

  },
  methods: {
    ifCollect() {
      ifCollect({ attractionId: this.data.attractionId, userId: Cookies.get("Id") }).then(res => {
        this.orCollect = res.data
        console.log(this.orCollect);

      })
    },
    // 跳转到评论页面
    Comments() {
      this.$router.push({ path: '/user/Usercomments', query: { id: this.data.attractionId } })
    },
    // 生成旅游计划
    aiPlan() {
      console.log(this.data);

      // this.loading = true
      // const arr = [`${this.data.attractionName}`]
      // aiPlan({ travals: arr, userId: Cookies.get("Id"), planName: `${this.data.attractionName}计划` }).then(res => {
      //   this.$modal.msgSuccess(res.msg);
      //   this.loading = false
      //   this.$router.push({ path: '/user/myPlan' })
      // })
    },
    // 收藏
    Collect() {
      Collect({ attractionId: this.data.attractionId, userId: Cookies.get("Id") }).then(res => {
        this.ifCollect()

        this.$modal.msgSuccess("操作成功");

      })
    },
  }
}

</script>

<style lang='scss'>
.detail-container {
  width: 100%;
  height: 800px;

  .title {
    color: #3366FF;
    font-size: 26px;
    text-align: center;
  }

  .el-carousel__container {
    height: 100%;
  }

  // background-color: red;
  .top {
    background-color: #F8F8F8;
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;

    .back {
      font-size: 30px;
      margin-left: 20px;

      &:hover {
        cursor: pointer;
        color: rgb(203, 141, 141);
      }
    }
  }

  .detail {
    width: 100%;
    height: 720px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    position: relative;

    .plan {
      justify-content: center;
      position: absolute;
      bottom: 20px;
      right: 50px;
      // width: 100px;
      // height: 30px;
      background-color: rgb(73, 150, 198);
      // line-height: 30px;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 10px;
      color: white;

      &:hover {
        cursor: pointer;
        background-color: rgb(0, 102, 204);
      }
    }

    .description {
      flex: 1;
      // background-color: red;
      padding: 0 20px;

    }

    .demo {
      width: 100%;
      height: 320px;
      display: flex;
      justify-content: space-around;
      gap: 10px;
      padding: 20px;
      box-sizing: border-box;
      align-items: center;
      // justify-content: center;

      // border: 2px solid black;
      .text {
        // padding: 10px 0;
        height: 220px;
        // background-color: #F8F8F8;
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        gap: 20px;

        align-content: space-between;



        .address {
          color: orange;
        }

        .openTime {
          color: #3366FF;
        }

        .rat {
          color: #3366FF;
          font-size: 12px;
        }

        .views {
          color: #3366FF;
          font-size: 12px;
        }

        .price {
          color: black;
          font-size: 18px;

          &::before {
            content: '票价：';
            color: rgb(245, 156, 88);
          }

          &::after {
            content: ' 元';
            color: rgb(245, 156, 88);
          }
        }
      }

      img {
        height: 100%;
        width: 100%;
        // object-fit: scale-down; /* 可选值：cover, fill, none, scale-down */
      }
    }

    .itemList {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .comments {
        height: 100%;
        display: flex;
        justify-content: center;
        flex: 1;

        align-items: center;
        border-top: 1px solid black;
        border-bottom: 1px solid black;

        button {
          width: 50%;
          height: 80%;
        }
      }

      .collect {
        height: 100%;
        // width: 90%;
        display: flex;
        justify-content: center;
        flex: 1;
        border-top: 1px solid black;
        border-right: 1px solid black;
        // 
        border-bottom: 1px solid black;

        align-items: center;

        button {
          width: 50%;
          height: 80%;
        }

      }
    }
  }
}
</style>